-@ val name: String = "this is the default value"
-@ val age: Int = 10086
-@ val winHeight: Int = 200
-@ val winWidth: Int = 300
-@ val neditUI: String = "/admin/nedit_product.html"
-@ val GridName: String = "table"
-@ val searchsFields: Seq[(String, String)] = Seq("name" -> "名称")
-@ val displayFields: Seq[(String, String)] = Seq("name" -> "名称")
-@ val getsURL: String = "/rest/admin/products"
-@ val getURL: String = "/rest/admin/product"
-@ val deleteURL: String = "/rest/admin/product"
-@ val postURL: String = "/rest/admin/product"
-@ val putURL: String = "/rest/admin/product"


-# 千万不要格式化

!!! 5
html(lang="zh-cmn-Hans")
    head
        meta(charset="UTF-8")
        meta{"http-equiv" => "Content-Type", :content => "text/html"}
        link(rel = "stylesheet" type ="text/css" href = "../js/jquery-easyui-1.4.1/themes/gray/easyui.css" )
        link(rel = "stylesheet" type ="text/css" href = "../js/jquery-easyui-1.4.1/themes/icon.css" )
        link(rel = "stylesheet" type ="text/css" href = "../css/default.css" )
        script(type="text/javascript" src="../js/jquery-easyui-1.4.1/jquery.min.js")
        script(type="text/javascript" src="../js/jquery-easyui-1.4.1/jquery.easyui.min.js")
        script(type="text/javascript" src="../js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js")
        script(type="text/javascript" src="../js/extends.js")
        script(type="text/javascript" src="../js/common.js")
    body.easyui-layout
        div#body(region="center")
            / 查询条件区域
            div#search_area
                div#conditon
                    table(border="0")
                        tr
                            - searchsFields.foreach(f =>
                                td #{f._2}
                                td
                                    input(name="#{f._1}" id="#{f._1}")
                            - )
                            td
                                a(href="javascript:void(0)" class="easyui-linkbutton my-search-button" iconCls="icon-search" plain="true" onclick="query()") 查询
                                a(href="javascript:void(0)" class="easyui-linkbutton my-search-button" iconCls="icon-reset" plain="true") 重置

            / 数据表格区域
            table(id="#{GridName}" style="table-layout:fixed")

            / 表格顶部工具按钮
            div#tt_btn
                a#save.easyui-linkbutton(href="javascript:void(0)" iconCls="icon-add" plain="true") 新增
                a#update.easyui-linkbutton(href="javascript:void(0)" iconCls="icon-edit" plain="true") 修改
                a#delete.easyui-linkbutton(href="javascript:void(0)" iconCls="icon-remove" plain="true") 删除

            / 用于弹出框
            div#child_win

:javascript
    $(function () {
            $.ajaxSetup({cache: false});
            init_datagrid();
            init_toolbar();
    });
    function init_datagrid() {
        $table().datagrid({
            height: datagrid_height(),
            width: datagrid_width(),
            idField: 'id',
            url: _gets_url(),
            method: "GET",
            singleSelect: true,
            nowrap: true,
            fitColumns: true,
            rownumbers: true,
            showPageList: false,
            columns: datagrid_columns(),
            toolbar: '#tt_btn',
            pagination: false,
            onDblClickRow: function (rowIndex, rowData) {
                viewDetail(rowData.userId);
            }
        });
    }
    function datagrid_height() {
        return $bodydiv().height() - $searcharea().height() - 5;
    }
    function datagrid_width() {
        return $bodydiv().width();
    }
    function init_toolbar() {
        //新增
        $("#save").on("click", function () {
            $table().datagrid('clearSelections');
            $childwin().window({
                title: '新增', width: nedit_ui_width(), height: nedit_ui_height(), href: nedit_ui_url()
            });
        });
        //修改
        $("#update").on("click", function () {
            if (!_isSelect())
                $parent.messager.alert('警告', '未选中任何行!', 'warning');
            else
                $childwin().window({
                    title: '修改', width: nedit_ui_width(), height: nedit_ui_height(), href: nedit_ui_url()
                });
        });
        //删除
        $("#delete").on("click", function () {
            if (!_isSelect())
                $parent.messager.alert('警告', '未选中任何行!', 'warning');
            else {
                var row = $table().datagrid('getSelected');
                $parent.messager.confirm('提示', '确认删除' + ("name" in row ? row.name : "") + '?', function (r) {
                    if (r)  _delete(row);
                });
            }
        });
    }
    function query() {
        $table().datagrid('load', query_condition());
    }
    function viewDetail(date, id) {
        $parent.messager.alert("提示", "查询详细", "info");
    }
    // 监听窗口大小变化
    window.onresize = function () {
        setTimeout(domresize, 300);
    };
    //改变表格宽高
    function domresize() {
        $table().datagrid('resize', {
            height: datagrid_height(),
            width: datagrid_width()
        });
    }
    function selected() {
        return $table().datagrid('getSelected');
    }
    function _isSelect() {
        return $table().datagrid('getSelected') != null;
    }
    function _post() {
        _doSubmit(_post_url(), 'POST', function (data) {
            var json = eval('(' + data + ')');
            if(("success" in json) && !json.success) {
                $.messager.alert('错误', '新增失败：' + json.message, 'error');
                return;
            }
            $table().datagrid('appendRow', json);
            $childwin().window("close");
        });
    }
    function _delete(row) {
        $.ajax({
            type: "DELETE",
            url: _delete_url(row.id),
            success: function () {
                var rowIndex = $table().datagrid('getRowIndex', row);
                $table().datagrid('deleteRow', rowIndex);
                $table().datagrid('clearSelections');
            },
            error: function (response) {
                $.messager.alert('错误', '删除' + ("name" in row ? row.name : "") + '失败：' + response.responseText, 'error');
            }
        });
    }
    function _put() {
        _doSubmit(_put_url(), 'PUT', function (data) {
            var json = eval('(' + data + ')');
            if(("success" in json) && !json.success) {
                $.messager.alert('错误', '更新失败：' + json.message, 'error');
                return;
            }
            var row = $table().datagrid('getSelected');
            var rowIndex = $table().datagrid('getRowIndex', row);
            $table().datagrid('updateRow', {
                index: rowIndex,
                row: json
            });
            $table().datagrid('clearSelections');
            $childwin().window("close");
        });
    }
    function _submit() {
        if (_isSelect())
            _put();
        else
            _post();
    }
    function _doSubmit(url, method, callback) {
        $form().form('submit', {
            url: url + '?_method=' + method,
            onSubmit: function () {
                return $(this).form('enableValidation').form('validate');
            },
            success: function (data) {
                callback(data);
            }
        });
    }
    function _get() {
        var row = $table().datagrid('getSelected');
        if (row) $form().form('load', _get_url(row.id));
    }

script(type="text/javascript")
    | function $bodydiv() { return $("#body"); }
    | function $searcharea() { return $('#search_area'); }
    | function $table() { return $('#table'); }
    | function $form() { return $('#form'); }
    | function $childwin() { return $("#child_win"); }
    | function nedit_ui_width()  { return #{winWidth}; }
    | function nedit_ui_height() { return #{winHeight}; }
    | function nedit_ui_url() { return '#{neditUI}'; }
    | function _gets_url() { return '#{getsURL}'; }
    | function _get_url(id) { return '#{getURL}/' + id; }
    | function _delete_url(id) { return '#{deleteURL}/' + id; }
    | function _post_url() { return '#{postURL}'; }
    | function _put_url() { return '#{putURL}'; }
    | function query_condition () { return {
    - searchsFields.foreach(f =>
        |   #{f._1}: $('##{f._1}').val(),
    - )
    |       query: true
    | };}
    | function datagrid_columns() {
    | return [[
    - displayFields.foreach(f =>
        |  {field: '#{f._1}', title: '#{f._2}', width: 100, halign: "center", align: "left"},
    - )
    | ]];
    | }